/*手机产品购买部分逻辑代码
------------------------------------------------------*/

/*隐藏导航
--------------------------------------------------------------*/
var navThirdWrapper = document.querySelector(".nav-third-bg");
window.onscroll = function (params) {
    // console.log(document.documentElement.scrollTop);    //100

    if (getScrollOffset().y >= 100) {
 
        navThirdWrapper.style.transition = "all 0.7s ease-in-out";
        navThirdWrapper.style.top = "0";

    } else {
        navThirdWrapper.style.transition = "all 0.7s ease-in-out";
        navThirdWrapper.style.top = "-42px";

    }
}

/*切换手机图片细节图
-------------------------------------------------------------------*/
var aImgTab = document.querySelectorAll(".img-tab div");
var aImgWrapperImg = document.querySelectorAll(".img-wrapper img");

for (var i = 0;i < aImgTab.length;i++) {
    aImgTab[i].index = i;
    aImgTab[i].onclick = function (params) {
        for (var i = 0;i < aImgTab.length;i++) {
            aImgTab[i].style.borderColor = "#999999";
        }
    
        this.style.borderColor = "#e8340e";
        for (var i = 0;i < aImgWrapperImg.length;i++) {
            aImgWrapperImg[i].style.display = "none";
        }
        aImgWrapperImg[this.index].style.display = "block";
    }
}


/*点击按钮切换"商品详情"&"规格参数"
----------------------------------------------------------------------*/
var aSecondTitle = document.querySelectorAll(".second-title a");
var aSecondContentToBeShown = document.querySelectorAll(".second-content-to-be-shown");

//为"商品详情"&"规格参数"添加点击事件和切换功能
for (var i = 0;i < aSecondTitle.length;i++) {
    aSecondTitle[i].index = i;
    aSecondTitle[i].onclick = function () {
        // console.log(this.index);
        for (var i = 0;i < aSecondTitle.length;i++) {
            aSecondTitle[i].style.color = "#000";
        }
        
        this.style.color = "#e33b1f";
        for (var i = 0;i < aSecondContentToBeShown.length;i++) {
            aSecondContentToBeShown[i].style.display = 'none';
            aSecondContentToBeShown[this.index].style.display = "block";
        }
    }
}



/*content1模拟数据内容动态渲染
-------------------------------------------------------------------*/

//选出版本选择区的 ul 元素
var chooseVersions = document.querySelector(".choose-versions ul");

//手机商品模拟数据
var jsonPhoneKind = {
    "ret": true,
    "data": {
        "phoneList": [{
            "id": "0001",
            "color": "深空灰",
            "imagesUrl": [
                "https://oss.static.nubia.cn/pic/154097575547.png",
                "https://oss.static.nubia.cn/pic/154097575561.png",
                "https://oss.static.nubia.cn/pic/154097575510.png",
                "https://oss.static.nubia.cn/pic/15409757545.png"
            ],
            "versions": {
                "first": "6GB+64GB",
                "second": "8GB+128GB"
            },
            "originalPrice": {
                "first": "￥2999.00",
                "second": "￥3399.00"
            },
            "retailPrice": {
                "first": "(零售价:￥3299.00)",
                "second": "(零售价:￥3699.00)"
            },
            "parts": {
                "first": "仅手机"
            },
            "service": [
                "屏碎宝（1年内保修1次） ￥189.00",
                "屏碎宝（半年内保修1次） ￥139.00"
            ],
            "service2": [
                "屏碎宝（1年内保修1次） ￥199.00",
                "屏碎宝（半年内保修1次） ￥149.00"
            ],
            "aging": [{
                "price": "￥1022.66*3",
                "desc": "(含￥68.98手续费)"
            },{
                "price": "￥522.33*6",
                "desc": "(含￥134.96手续费)"
            },{
                "price": "￥268.66*12",
                "desc": "(含￥224.93手续费)"
            }],
            "aging2": [{
                "price": "￥1159.06*3",
                "desc": "(含￥78.18手续费)"
            },{
                "price": "￥591.99*6",
                "desc": "(含￥152.96手续费)"
            },{
                "price": "￥304.49*12",
                "desc": "(含￥254.93手续费)"
            }]
        },{
            "id": "0002",
            "color": "黑金",
            "imagesUrl": [
                "https://oss.static.nubia.cn/active/5c37ff7b69a8693.png",
                "https://oss.static.nubia.cn/active/5c37ff7b5f90925.png",
                "https://oss.static.nubia.cn/active/5c37ff7b3b6df34.png",
                "https://oss.static.nubia.cn/active/5c37ff7ae2d4010.png"
            ],
            "versions": {
                "first": "8GB+256GB"
            },
            "originalPrice": {
                "first": "￥3899.00"
            },
            "retailPrice": {
                "first": "(零售价:￥4199.00)"
            },
            "parts": {
                "first": "仅手机"
            },
            "service": [
                "屏碎宝（1年内保修1次） ￥219.00",
                "屏碎宝（半年内保修1次） ￥159.00"
            ],
            "aging": [{
                "price": "￥1329.56*3",
                "desc": "(含￥89.68手续费)"
            },{
                "price": "￥679.08*6",
                "desc": "(含￥175.46手续费)"
            },{
                "price": "￥349.29*12",
                "desc": "(含￥292.43手续费)"
            }]
        },{
            "id": "0003",
            "color": "海光蓝",
            "imagesUrl": [
                "https://oss.static.nubia.cn/active/5c37ff23186a448.png",
                "https://oss.static.nubia.cn/active/5c37ff231e44b4.png",
                "https://oss.static.nubia.cn/active/5c37ff231cdeb97.png",
                "https://oss.static.nubia.cn/active/5c37ff2324bac30.png"
            ],
            "versions": {
                "first": "8GB+128GB",
                "second": "6GB+64GB"
            },
            "originalPrice": {
                "first": "￥3499.00",
                "second": "￥3099.00"
            },
            "retailPrice": {
                "first": "(零售价:￥3799.00)",
                "second": "(零售价:￥3399.00)"
            },
            "parts": {
                "first": "仅手机"
            },
            "service": [
                "屏碎宝（1年内保修1次） ￥199.00",
                "屏碎宝（半年内保修1次） ￥149.00"
            ],
            "service2": [
                "屏碎宝（1年内保修1次） ￥189.00",
                "屏碎宝（半年内保修1次） ￥139.00"
            ],
            "aging": [{
                "price": "￥1193.16*3",
                "desc": "(含￥80.48手续费)"
            },{
                "price": "￥609.41*6",
                "desc": "(含￥157.46手续费)"
            },{
                "price": "￥313.45*12",
                "desc": "(含￥262.43手续费)"
            }],
            "aging2": [{
                "price": "￥1056.76*3",
                "desc": "(含￥71.28手续费)"
            },{
                "price": "￥539.74*6",
                "desc": "(含￥139.46手续费)"
            },{
                "price": "￥277.62*12",
                "desc": "(含￥232.43手续费)"
            }]     
        },{
            "id": "0004",
            "color": "星空典藏版（蓝金梵高版）",
            "imagesUrl": [
                "https://oss.static.nubia.cn/active/5c3800478d63198.png",
                "https://oss.static.nubia.cn/active/5c380047b0d6e46.png",
                "https://oss.static.nubia.cn/active/5c380047d8aa277.png",
                "https://oss.static.nubia.cn/active/5c380047e736e91.png"
            ],
            "versions": {
                "first": "8GB+512GB"
            },
            "originalPrice": {
                "first": "￥4999.00"
            },
            "retailPrice": {
                "first": "(零售价:￥5299.00)"
            },
            "parts": {
                "first": "仅手机"
            },
            "service": [
                "屏碎宝（1年内保修1次） ￥189.00",
                "屏碎宝（半年内保修1次） ￥279.00"
            ],
            "aging": [{
                "price": "￥1704.66*3",
                "desc": "(含￥114.98手续费)"
            },{
                "price": "￥870.66*6",
                "desc": "(含￥224.96手续费)"
            },{
                "price": "￥447.83*12",
                "desc": "(含￥374.93手续费)"
            }]
        },{
            "id": "0005",
            "color": "蓝金版",
            "imagesUrl": [
                "https://oss.static.nubia.cn/upload/5c2315536996994.jpg",
                "https://oss.static.nubia.cn/upload/5c2315537dc9683.jpg",
                "https://oss.static.nubia.cn/upload/5c23155339c2075.jpg",
                "https://oss.static.nubia.cn/upload/5c231553808ff8.jpg"
            ],
            "versions": {
                "first": "8GB+256GB"
            },
            "originalPrice": {
                "first": "￥3999.00"
            },
            "retailPrice": {
                "first": "(零售价:￥4299.00)"
            },
            "parts": {
                "first": "仅手机"
            },
            "service": [
                "屏碎宝（1年内保修1次） ￥159.00",
                "屏碎宝（半年内保修1次） ￥219.00"
            ],
            "aging": [{
                "price": "￥1363.66*3",
                "desc": "(含￥91.98手续费)"
            },{
                "price": "￥696.49*6",
                "desc": "(含￥179.96手续费)"
            },{
                "price": "￥358.24*12",
                "desc": "(含￥299.93手续费)"
            }]
        }]
    } 
}

//获取模拟的json数据中的 phoneList
var getJson = jsonPhoneKind.data.phoneList;


/*颜色选择区
-------------------------------------------------------------------------*/
//选中颜色选择区的 ul
var chooseColor = document.querySelector(".choose-colors ul");

//循环所有json数据项,并获取其中color项,动态创建 li 和 a,插入到 ul 中
for (var i = 0;i < getJson.length;i ++) {
    
    var getJsonColor = getJson[i].color;

    //json 中共有几个 color 项就创建几个 li 和 a
    var oLi = document.createElement("li");
    var oA = document.createElement("a");
    oA.innerHTML = getJsonColor;
    oLi.appendChild(oA);
    chooseColor.appendChild(oLi);
}

//获取当前页面上“颜色选择区”动态生成出来的 li
var aLiBtnClick = chooseColor.getElementsByTagName("li");

//为第一个颜色选择按钮设置默认选中颜色
aLiBtnClick[0].style.borderColor = "rgb(255, 77, 77)";

//为每个"颜色选择区"按钮添加点击事件及事件处理函数
for (var i = 0;i < aLiBtnClick.length;i ++) {
    aLiBtnClick[i].index = i;
    aLiBtnClick[i].onclick = function (params) {

        var currentGetJson = getJson[this.index];

        //将所有按钮的 borderColor 重置为 "#999999"
        for (var i = 0;i < aLiBtnClick.length;i++) {
            aLiBtnClick[i].style.borderColor = "#999999";
        }
        
        //将当前点击的按钮 borderColor 设置为 "rgb(255, 77, 77)"
        this.style.borderColor = "rgb(255, 77, 77)";

        //调用动态创建"版本选择区"按钮的方法,并将当前索引下标作为参数传入
        createVerElements(this.index);

        //为每次"重新"渲染出来的版本选择按钮,第一项添加默认选中样式
        var createNewLi = chooseVersions.getElementsByTagName("li");
        createNewLi[0].style.borderColor = "rgb(255, 77, 77)";

        //执行改变"版本选择区"按钮颜色的方法
        changeVerBtnColor(this.index, this.innerText);      

        //为"配件选择区"按钮,其中第一项添加默认选中样式
        var getNewPartsLi = choosePartsUl.getElementsByTagName("li");
        getNewPartsLi[0].style.borderColor = "#999999";   
        
        //调用动态创建"保障服务"区按钮的方法
        createServiceElements(this.index);

        //为"服务保障区"按钮添加事件
        handleServiceLiBtnClick();

        //创建"花呗分期区"按钮
        createInstallmentElements(currentGetJson.aging);

        //调用改变当前颜色按钮对应显示的图片
        changeImgSrc(this.index);

        // console.log(this.innerText);
        var createNewLi = chooseVersions.getElementsByTagName("li")[0];
        var createNewA = createNewLi.getElementsByTagName("a")[0].innerHTML;
        chooseShow(this.innerText, createNewA);


        originalPrice(this.index);

        //将"立即购买区"显示的零售价格显示出来
        oldPrice.style.display = "block";
    }

    
    //为每个颜色选择按钮添加鼠标移入移出事件
    colorHoverChange(aLiBtnClick);

}




/*版本选择区
----------------------------------------------------------------------------*/
var createNewLi = chooseVersions.getElementsByTagName("li");
//动态创建版本选择按钮方法
function createVerElements(index) {

    //获取当前颜色选择按钮所在的 json 对象
    // var currentGetJson = getJson[this.index];
    var currentGetJson = getJson[index];
    var currentVerObj = currentGetJson.versions;

    //颜色选择按钮的点击事件触发时,版本选择区的 ul 内的 li 和 a 会被清空,以便重新渲染
    chooseVersions.innerHTML = "";

    //使用 for...in 循环这个 versions 属性对应的对象(也就是手机版本)
    for (var props in currentVerObj) {

        var verLi = document.createElement("li");
        var verA = document.createElement("a");
        verA.innerHTML = currentVerObj[props];
        verLi.appendChild(verA);
        chooseVersions.appendChild(verLi);
    }
}

//为默认显示(页面第一次渲染)的版本选择按钮,中的第一个按钮默认渲染到页面上
createVerElements(0);

//改变"版本选择区"按钮颜色及相关的方法
function changeVerBtnColor(index, color) {
    var createNewLi = chooseVersions.getElementsByTagName("li");
    for (var i = 0;i < createNewLi.length;i ++) {

        createNewLi[i].index = i;
        //鼠标点击时改变颜色
        createNewLi[i].onclick = function (params) {
            // console.log(this.innerHTML);
            for (var i = 0;i < createNewLi.length;i++) {
                createNewLi[i].style.borderColor = "#999999";
            }
            this.style.borderColor = "rgb(255, 77, 77)";

            //调用配件区的方法
            createPartsElements(index);

            //如果当前点击的按钮索引不为0的话,说明有多个按钮,并且当前点击的按钮也不是第一个
            //当前版本按钮最多只有两个,因此说明当前点击的是第二个按钮
            if (this.index !== 0) {

                //先清空原有的保障服务区按钮
                chooseServiceUl.innerHTML = "";
                // console.log(getJson[index].service2);

                var getJsonService2 = getJson[index].service2;

                //动态创建保障服务区按钮
                for (let i = 0;i < getJsonService2.length;i ++) {

                    // console.log(getJsonService2[i].name);
                    var createNewLiForService2 = document.createElement("li");
                    var createNewAForService2 = document.createElement("a");
                    createNewAForService2.innerHTML = getJsonService2[i];
                    createNewLiForService2.appendChild(createNewAForService2);
                    chooseServiceUl.appendChild(createNewLiForService2);

                }

                //给当前所有保障服务区按钮添加事件
                handleServiceLiBtnClick();

                //获取当前点击的 li 内部 a 元素中的文本内容
                var createNewA = createNewLi[this.index].getElementsByTagName("a")[0].innerHTML;

                //将该文本内容作为chooseShow的第二个参数传入(版本内容)
                chooseShow(color, createNewA);

                //点击第二个版本按钮时，将价格中第二项的内容渲染到页面上
                originalPrice2(index); 

                createInstallmentElements(getJson[index].aging2);

            } else {
                createServiceElements(index);

                //给当前所有保障服务区按钮添加事件
                handleServiceLiBtnClick();

                var createNewA = createNewLi[this.index].getElementsByTagName("a")[0].innerHTML;
                chooseShow(color, createNewA);

                //点击第一个版本按钮时，将价格中第一项的内容渲染到页面上
                originalPrice(index); 

                createInstallmentElements(getJson[index].aging);
            }

        }

        //调用鼠标移入移除按钮边框颜色变化方法
        colorHoverChange(createNewLi);

        //为默认显示(页面第一次渲染)的版本选择按钮,中的第一个添加默认选中样式
        createNewLi[0].style.borderColor = "rgb(255, 77, 77)";
    }
}

//执行改变"版本选择区"按钮颜色的方法,让第一次渲染出来的DOM也有该效果
changeVerBtnColor(0, "深空灰");



/*鼠标移入移出边框颜色变化方法
-------------------------------------------------------------------------*/
function colorHoverChange (element) {
    for (var i = 0;i < element.length;i ++) {
        element[i].onmouseover = function () {
            //如果当前鼠标移入的按钮颜色值不为 "rgb(255, 77, 77)",则变为 "#000"
            if (this.style.borderColor !== "rgb(255, 77, 77)") {
                this.style.borderColor = "#000";
            }
        }

        element[i].onmouseout = function () {
            //如果当前鼠标移出的按钮颜色值不为 "rgb(255, 77, 77)",则变为 "#999999"
            if (this.style.borderColor !== "rgb(255, 77, 77)") {
                this.style.borderColor = "#999999";
            } 
        }
    }

}



/*配件区
-------------------------------------------------------------------------*/
//获取“配件区” ul
var choosePartsUl = document.querySelector(".choose-parts ul");

//根据当前选中的"颜色选择按钮"对应的json数据,动态创建"配件区按钮"
function createPartsElements(index) {
    var currentGetJson = getJson[index];
    var currentGetJsonParts = currentGetJson.parts;
    

    //每次动态渲染前,清空 ul 中的所有内容
    choosePartsUl.innerHTML = "";

    //循环遍历 parts 属性所有的值,动态创建li&a,并组装
    for (var props in currentGetJsonParts) {
        var partsLi = document.createElement("li");
        var partsA = document.createElement("a");
        partsA.innerHTML = currentGetJsonParts[props];
        partsLi.appendChild(partsA);
        choosePartsUl.appendChild(partsLi);
    }  
    
    var getNewPartsLi = choosePartsUl.getElementsByTagName("li");
    getNewPartsLi[0].style.borderColor = "rgb(255, 77, 77)";

    for (var i = 0;i < getNewPartsLi.length;i ++) {
        getNewPartsLi[i].onclick = function (params) {
            this.style.borderColor = "rgb(255, 77, 77)";
            // console.log(this.innerHTML);

            //将"立即购买区"显示的零售价格去除
            oldPrice.style.display = "none";

            if (currentGetJson.versions.second) {
                if (createNewLi[0].style.borderColor !== "rgb(255, 77, 77)") {
                    originalPrice2(index)
                } 
            } else {
                originalPrice(index);
            }
            
        }
    }

    colorHoverChange(getNewPartsLi);
}

//默认显示第0项
createPartsElements(0);



/*保障服务区功能
--------------------------------------------------------------*/
//选出"保障服务"区的 ul
var chooseServiceUl = document.querySelector(".choose-service ul");

//定义创建"保障服务"区按钮的方法
function createServiceElements(index) {


    var currentGetJson = getJson[index];
    var currentGetJsonService = currentGetJson.service;


    chooseServiceUl.innerHTML = "";
    for (var i = 0;i < currentGetJsonService.length;i ++) {
        // console.log(currentGetJsonService[i].name);
        var chooseServiceLi = document.createElement('li');
        var chooseServiceA = document.createElement('a');
        chooseServiceA.innerHTML = currentGetJsonService[i];
        chooseServiceLi.appendChild(chooseServiceA);
        chooseServiceUl.appendChild(chooseServiceLi);
    }

    handleServiceLiBtnClick();
}

createServiceElements(0);

//给动态创建出来的"服务保障区"按钮添加事件
function handleServiceLiBtnClick() {
    var newCreateServiceLi = chooseServiceUl.getElementsByTagName("li");

    //循环"服务保障区"所有按钮
    for (let i = 0;i < newCreateServiceLi.length;i ++) {

        //为每个按钮添加自定义属性 index 作为索引下标
        newCreateServiceLi[i].index = i;

        //设置变量 flag 控制每一次点击相同按钮执行不同的内容
        var flag = true;
        var flag2 = true;

        //给"服务保障区"每个按钮添加点击事件
        newCreateServiceLi[i].addEventListener('click',function () {

            //每次渲染出来的"服务保障区按钮"都有两个,索引下标不为 0,则说明点击的按钮为第二个
            //否则,索引下标为 0,则说明点击的按钮为第一个
            if (this.index !== 0) {

                if (flag) {
                    //获取当前点击按钮的内部文本
                    var currentBtnText = this.innerHTML;

                    //通过substring()方法,将按钮文本中的"价格"截取出来
                    var numStr = currentBtnText.substring(17, 20);

                    //将字符串数字转成 number 类型
                    var num = Number(numStr);

                    //设置点击状态下的按钮边框颜色
                    for (let i = 0;i < newCreateServiceLi.length;i ++) {
                        newCreateServiceLi[i].style.borderColor = "#999";
                    }
                    this.style.borderColor = "rgb(255, 77, 77)";

                    addPrice(num);

                    flag = false;
                } else {
                    //获取当前点击按钮的内部文本
                    var currentBtnText = this.innerHTML;

                    //通过substring()方法,将按钮文本中的"价格"截取出来
                    var numStr = currentBtnText.substring(17, 20);

                    //将字符串数字转成 number 类型
                    var num = Number(numStr);

                    subtractPrice(num);

                    for (let i = 0;i < newCreateServiceLi.length;i ++) {
                        newCreateServiceLi[i].style.borderColor = "#999";
                    }

                    flag = true;
                }

            } else {

                if (flag2) {
                    //获取当前点击按钮的内部文本
                    var currentBtnText = this.innerHTML;

                    //通过substring()方法,将按钮文本中的"价格"截取出来
                    var numStr = currentBtnText.substring(17, 20);

                    //将字符串数字转成 number 类型
                    var num = Number(numStr);

                    //设置点击状态下的按钮边框颜色
                    for (let i = 0;i < newCreateServiceLi.length;i ++) {
                        newCreateServiceLi[i].style.borderColor = "#999";
                    }
                    this.style.borderColor = "rgb(255, 77, 77)";

                    addPrice(num);

                    flag2 = false;
                } else {
                    //获取当前点击按钮的内部文本
                    var currentBtnText = this.innerHTML;

                    //通过substring()方法,将按钮文本中的"价格"截取出来
                    var numStr = currentBtnText.substring(17, 20);

                    //将字符串数字转成 number 类型
                    var num = Number(numStr);

                    subtractPrice(num);

                    for (let i = 0;i < newCreateServiceLi.length;i ++) {
                        newCreateServiceLi[i].style.borderColor = "#999";
                    }

                    flag2 = true;
                }
            }
                

        }, false)


    }

    //调用颜色改变方法,为按钮添加动态颜色
    colorHoverChange(newCreateServiceLi);
}

//先调用一次,给首次渲染出来的所有“服务保障区”按钮添加点击事件




/*花呗分期区
--------------------------------------------------------------*/
//选出"花呗分期区"的 ul
var oInstallmentUl = document.querySelector(".installment ul");

//动态创建花呗分期区中元素的方法
function createInstallmentElements(number) {

    // var currentGetJson = getJson[index];
    var currentService = number;

    oInstallmentUl.innerHTML = "";
    // console.log(currentService);    //[{},{},{}]

    for (let i = 0;i < currentService.length;i ++) {
        // console.log(currentService[i].price);   //价格
        // console.log(currentService[i].desc);    //手续费描述

        var oInstallmentP01 = document.createElement("p");
        var oInstallmentP02 = document.createElement("p");
        var oInstallmentLi = document.createElement("li");

        oInstallmentP01.innerHTML = currentService[i].price;
        oInstallmentP02.innerHTML = currentService[i].desc;
        oInstallmentLi.appendChild(oInstallmentP01);
        oInstallmentLi.appendChild(oInstallmentP02);
        oInstallmentUl.appendChild(oInstallmentLi);
    }
}

//页面首次渲染,默认显示出第一项
createInstallmentElements(getJson[0].aging);



/*左侧图片区
--------------------------------------------------------------*/
//选出大图片区内的所有 img 元素
var aImgWrapperImg = document.querySelectorAll(".img-wrapper img");

//选出 tab 图片区内的所有 img 元素
var aImgTabImg = document.querySelectorAll(".img-tab div img");

//切换图片地址的方法
function changeImgSrc(index) {
    var currentGetJson = getJson[index];
    var currentImagesUrl = currentGetJson.imagesUrl;


    for (let i = 0;i < currentImagesUrl.length;i ++) {
        
        aImgWrapperImg[i].src = currentImagesUrl[i];
        aImgTabImg[i].src = currentImagesUrl[i];
    }
}



/*最终选择的商品信息
------------------------------------------------------------------*/
//选出商品选择信息的外部 p 元素
var chooseFinishShow = document.querySelector(".choose-finish-show p");

//选出"顶部隐藏导航"中显示颜色信息的 li 元素
var navThirdWrapperLi03 = document.querySelector(".nav-third-wrapper ul li:nth-child(3)");

//选出"顶部隐藏导航"中显示版本信息的 li 元素
var navThirdWrapperLi02 = document.querySelector(".nav-third-wrapper ul li:nth-child(2)");

//定义显示选择信息的方法(颜色+版本)
function chooseShow(chooseColor, chooseVer) {

    //将选择的内容输出到"商品选择信息区"
    chooseFinishShow.innerHTML = "X " + chooseColor + " " + chooseVer;

    //将选择的内容输出到"顶部隐藏导航区"
    // console.log(navThirdWrapperLi03.innerHTML);
    navThirdWrapperLi03.innerHTML = chooseColor;

    navThirdWrapperLi02.innerHTML = chooseVer;
}




/*当前商品基础价格
----------------------------------------------------------------*/
//选出"顶部隐藏导航"中显示价格信息的 li 元素
var navThirdWrapperLi01 = document.querySelector(".nav-third-wrapper ul li:nth-child(1)");

//选出"购买标题区"中显示价格信息的 span 元素
var mainRightTitleSpan = document.querySelector(".main-right-title span");

//选出"立即购买区"中显示价格信息的元素
var buyNowPrice = document.querySelector(".buy-now .price");

//选出"立即购买区"中显示零售价格的元素
var oldPrice = document.querySelector(".old-price");

function originalPrice(index) {
    var currentGetJson = getJson[index];
    var currentOriginalPrice = currentGetJson.originalPrice;
    //retailPrice
    var currentRetailPrice = currentGetJson.retailPrice;
    // console.log(currentOriginalPrice);  //值为一个{}

    // console.log(currentOriginalPrice.first);

    //将价格中第一项的内容渲染到"顶部隐藏导航"区
    navThirdWrapperLi01.innerHTML = currentOriginalPrice.first;

    //将价格中第一项的内容渲染到"购买标题区"
    mainRightTitleSpan.innerHTML = currentOriginalPrice.first;

    //将价格中第一项的内容渲染到"立即购买区"
    buyNowPrice.innerHTML = currentOriginalPrice.first;

    //将零售价格中第一项的内容渲染到"立即购买区"
    oldPrice.innerHTML = currentRetailPrice.first;

}

function originalPrice2(index) {
    var currentGetJson = getJson[index];
    var currentOriginalPrice = currentGetJson.originalPrice;
    //retailPrice
    var currentRetailPrice = currentGetJson.retailPrice;
    // console.log(currentOriginalPrice);  //值为一个{}

    // console.log(currentOriginalPrice.first);

    //将价格中第一项的内容渲染到"顶部隐藏导航"区
    navThirdWrapperLi01.innerHTML = currentOriginalPrice.second;

    //将价格中第一项的内容渲染到"购买标题区"
    mainRightTitleSpan.innerHTML = currentOriginalPrice.second;

    //将价格中第一项的内容渲染到"立即购买区"
    buyNowPrice.innerHTML = currentOriginalPrice.second;

    //将零售价格中第一项的内容渲染到"立即购买区"
    oldPrice.innerHTML = currentRetailPrice.second;

}


//基础价格加上保障服务价格
function addPrice(num) {
    // console.log(navThirdWrapperLi01.innerHTML);
    // console.log(mainRightTitleSpan.innerHTML);
    // console.log(buyNowPrice.innerHTML);
    // console.log(oldPrice.innerHTML);
    // console.log(num);

    var str1 = navThirdWrapperLi01.innerHTML;
    var str2 = mainRightTitleSpan.innerHTML;
    var str3 = buyNowPrice.innerHTML;
    var str4 = oldPrice.innerHTML;

    var num1 = Number(str1.substring(1, 8));
    var num2 = Number(str2.substring(1, 8));
    var num3 = Number(str3.substring(1, 8));
    var num4 = Number(str4.substring(6, 10));
    // console.log(num4);

    // console.log(str1);
    navThirdWrapperLi01.innerHTML = "￥" + (num1 + num) + ".00";
    mainRightTitleSpan.innerHTML = "￥" + (num2 + num) + ".00";
    buyNowPrice.innerHTML = "￥" + (num3 + num) + ".00";
    oldPrice.innerHTML = "(零售价:￥" + (num4 + num) + ".00)";
}


//基础价格加上保障服务价格,结果减去保障服务价格 => 也就是恢复到原来的基础价格
function subtractPrice(num) {
    // console.log(navThirdWrapperLi01.innerHTML);
    // console.log(mainRightTitleSpan.innerHTML);
    // console.log(buyNowPrice.innerHTML);
    // console.log(oldPrice.innerHTML);
    // console.log(num);

    var str1 = navThirdWrapperLi01.innerHTML;
    var str2 = mainRightTitleSpan.innerHTML;
    var str3 = buyNowPrice.innerHTML;
    var str4 = oldPrice.innerHTML;

    var num1 = Number(str1.substring(1, 8));
    var num2 = Number(str2.substring(1, 8));
    var num3 = Number(str3.substring(1, 8));
    var num4 = Number(str4.substring(6, 10));

    // console.log(str1);
    navThirdWrapperLi01.innerHTML = "￥" + (num1 - num) + ".00";
    mainRightTitleSpan.innerHTML = "￥" + (num2 - num) + ".00";
    buyNowPrice.innerHTML = "￥" + (num3 - num) + ".00";
    oldPrice.innerHTML = "(零售价:￥" + (num4 - num) + ".00)";
}